<template>
  <div class>
    <naviHeader></naviHeader>
    <div class="margin-bottem">
      <div v-show="courseDetail.type === 'MP3'">
        <audioUI :audioUrl="courseDetail.objectUrl"></audioUI>
      </div>
      <div v-show="courseDetail.type === 'VIDEO'">
        <videoUI :videoUrl="courseDetail.objectUrl"></videoUI>
      </div>
      <div class="tab">
        <div
          class="item"
          v-bind:class="[showItem === 'info' ? 'border-bottom' : '']"
          v-on:click="showItem = 'info'"
        >课程介绍</div>
        <div
          class="item"
          v-bind:class="[showItem === 'comment' ? 'border-bottom' : '']"
          v-on:click="showItem = 'comment'"
        >评论</div>
      </div>

      <div v-if="showItem === 'info'">
        <img class="cover" v-bind:src="imgBaseUrl + courseDetail.coverUrl" alt>

        <div class="info">
          <div class="title">{{courseDetail.className}}</div>
          <div class="total" v-if="!courseDetail.free">
            <div class="price border-right">{{courseDetail.price}}</div>
            <div>{{courseDetail.buyNumber}}人购买</div>
          </div>
        </div>

        <div class="flex-contianer">
          <div>积分可抵用￥8.00元</div>
          <div>VIP 8折</div>
        </div>

        <div class="content">
          <p v-html="courseDetail.content"></p>
        </div>
      </div>

      <div class="comment" v-if="showItem === 'comment'">
        <div class="btn" v-on:click="showFloder = true">评论</div>
        <div class="list-item" v-for="(item, index) in commentlist" :key="item.index">
          <div>
            <img class="avatar" :src="item.userHeadImage" alt>
          </div>
          <div>
            <div class="flex-item">
              <div>
                <div class="name">{{item.userNick}}</div>
                <div class="date">{{item.createTime}}</div>
              </div>

              <div class="flex-item">
                <div class="praiseNum">{{item.praiseNumber}}</div>
                <div>
                  <img
                    v-show="!item.praise"
                    v-on:click.stop="changeLiked(index)"
                    class="like-btn"
                    src="../../images/icon/like.png"
                    alt
                  >
                  <img
                    v-show="item.praise"
                    v-on:click.stop="changeLiked(index)"
                    class="like-btn"
                    src="../../images/icon/liked.png"
                    alt
                  >
                </div>
              </div>
            </div>
            <div class="content">{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer" v-if="!courseDetail.free">
      <div class="price">￥{{courseDetail.price}}</div>
      <div class="btn">立即购买</div>
    </div>

    <div class="input-floder" v-if="showFloder">
      <div class="mask"></div>
      <div class="container">
        <div class="title">添加评论</div>
        <div>
          <input v-model="inputValue" type="text" placeholder="添加评论">
        </div>
        <div class="btn-container">
          <div v-on:click="showFloder = false">取消</div>
          <div class="confirm-btn" v-on:click="sendComment">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import audio from "src/components/audio/audio";
import video from "src/components/video/video";

import {
  getCourseDetail,
  getComment,
  getCourseList,
  postPraise,
  postCancelPraise
} from "../../service/getData";
import { imgBaseUrl } from "../../config/env";
import { postComment } from "../../service/getData";
import { getDateDiff } from "../../util/util";

export default {
  data() {
    return {
      showFloder: false,
      inputValue: "",
      title: "幸福人生必修课：旨在解决人生每一个阶段会遭遇的痛点",
      total: "9",
      person: "300",
      showItem: "info",
      imgBaseUrl: imgBaseUrl,
      replyTargetId: "",
      audioUrl: "",
      videoUrl: "",
      list: [],
      commentlist: [],
      courseDetail: {}
    };
  },

  mounted() {
    this.init();
  },
  components: {
    naviHeader,
    audioUI: audio,
    videoUI: video
  },
  methods: {
    init: function() {
      getCourseDetail(this.$store.userToken, this.$route.params.id).then(
        res => {
          // res.content = res.content.replace("<p>", "").replace("</p>", "");
          this.courseDetail = res;
        }
      );

      getCourseList(this.$store.userToken).then(res => {
        this.list = res.content;
      });

      // 专栏评价信息
      getComment(this.$store.userToken, this.$route.params.id).then(res => {
        res.conent = res.content.map(item => {
          item.createTime = getDateDiff(item.createTime);
          return item;
        });
        this.commentlist = res.content;
      });
    },

    changeLiked: function(index) {
      let { praise, praiseNumber, id } = this.commentlist[index];
      if (praise) {
        praiseNumber = praiseNumber - 1;
        postCancelPraise(this.$store.userToken, id);
      } else {
        praiseNumber = praiseNumber + 1;
        postPraise(this.$store.userToken, id, this.$store.userInfo.id);
      }

      this.commentlist[index].praiseNumber = praiseNumber;
      this.commentlist[index].praise = !praise;
    },
    sendComment: function() {
      let targetId = "";
      if (this.replyTargetId !== "") {
        targetId = this.replyTargetId;
        this.replyTargetId = "";
      } else {
        targetId = this.$route.params.id;
      }

      postComment(
        this.$store.userToken,
        targetId,
        this.$store.userInfo.id,
        this.inputValue
      ).then(res => {
        getComment(this.$store.userToken, this.$route.params.id).then(res => {
          res.conent = res.content.map(item => {
            item.createTime = getDateDiff(item.createTime);
            return item;
          });
          this.commentlist = res.content;

          this.inputValue = "";
          this.showFloder = false;
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.margin-bottem {
  margin-bottom: 1rem;
}

.cover {
  height: 3.6rem;
  width: 7.5rem;
}

.tab {
  @include fj(space-around);
  background: #fff;
  border-bottom: 2px solid #f1f1f1;

  .item {
    height: 1rem;
    line-height: 1rem;
    width: 2rem;
    text-align: center;
  }

  .border-bottom {
    border-bottom: 2px solid #16e08f;
  }
}

.info {
  padding: 0.2rem;
  background: #fff;
  border-bottom: 2px solid #f1f1f1;

  .title {
    @include sc(0.4rem, #000);
    padding: 0.2rem 0;
  }

  .total {
    @include fj(flex-start);
    align-items: center;

    .price {
      color: #049009;
      margin: 0rem 0.1rem;
      font-size: 0.35rem;
    }

    .price::before {
      content: "￥";
      font-size: 0.28rem;
    }

    div {
      @include sc(0.26rem, #888);

      // margin-top: 0.2rem;
      // text-align: center;
      padding: 0.1rem 0.2rem;
    }

    .border-right {
      // border-right: 2px solid #f1f1f1;
    }
  }
}

.flex-contianer {
  @include sc(0.26rem, #888);
  @include fj(flex-start);

  border-bottom: 2px solid #f1f1f1;
  background: #fff;
}

.flex-contianer > div {
  padding: 0.2rem;
}

.content{
  @include sc(0.28rem, #999);
  padding: 0.2rem;
  background: #fff;
}

.list-container {
  background: #fff;

  .list-item {
    @include fj(space-between);
    align-items: center;
    border-bottom: 2px solid #f1f1f1;
    align-items: center;
    height: 1rem;

    .flex-item {
      @include fj(flex-start);

      .poster {
        width: 0.48rem;
        height: 0.48rem;
        margin: 0rem 0.1rem;
      }

      .title {
        width: 5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .lock {
      width: 0.3rem;
      height: 0.3rem;
      margin: 0rem 0.1rem;
    }
  }
}

.comment {
  .btn {
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 25px;
    text-align: center;

    position: fixed;
    right: 0.6rem;
    bottom: 2rem;
  }

  .list-item {
    background: #fff;
    border-bottom: 2px solid #f1f1f1;
    @include fj(flex-start);
    padding-top: 0.1rem;

    .avatar {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 25px;
      margin: 0 0.1rem 0 0.3rem;
    }

    .flex-item {
      @include fj(space-between);
      align-items: center;
      padding: 0 0.2rem;
    }

    .name {
      @include sc(0.3rem, #666);
    }

    .date {
      @include sc(0.22rem, #999);
      line-height: 0.5rem;
    }

    .content {
      @include sc(0.28rem, #444);

      padding: 0.2rem 0.3rem;
      width: 7.5rem;
    }

    .praiseNum {
      @include sc(0.32rem, #999);
    }

    .like-btn {
      height: 0.4rem;
      line-height: 0.4rem;
      padding: 0 0 0 0.2rem;
    }
  }
}
.footer {
  @include fj(space-between);
  align-items: center;
  padding: 0.2rem;
  background: #fff;
  width: 7.5rem;
  border-top: 2px solid #f1f1f1;

  position: fixed;
  bottom: 0;
  left: 0;

  .price {
    @include sc(0.32rem, #16e08f);
  }

  .btn {
    color: #fff;
    background: #16e08f;
    padding: 0.2rem;
    border-radius: 25px;
  }
}

// 评论框
.input-floder {
  position: absolute;
  top: 0;
  left: 0;
  width: 7.5rem;
  height: 100%;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0.5, 0.5, 0.5, 0.5);
    width: 7.5rem;
    height: 100%;
  }

  .container {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    height: 3.8rem;
    background: #fff;
    border-radius: 10px;

    .title {
      height: 1.4rem;
      line-height: 1.4rem;
      width: 100%;
      text-align: center;
    }

    input {
      width: 80%;
      margin-left: 10%;
      margin: 0.1rem 10% 0.3rem 10%;
      height: 1rem;
      border: 2px solid #f1f1f1;
      padding: 0.1rem;
      border-radius: 10px;
    }

    .btn-container {
      @include fj(space-around);

      .confirm-btn {
        border-left: 2px solid #f1f1f1;
        color: #16e08f;
      }
    }

    .btn-container > div {
      width: 50%;
      text-align: center;
      height: 1rem;
      line-height: 1rem;
      border-top: 2px solid #f1f1f1;
    }
  }
}
</style>

